<template>
  <div class="cartbox">
    <Tips></Tips>

    <van-checkbox-group
      :disabled="isEdit"
      v-model="result"
      ref="checkboxGroup"
      v-if="carList.length > 0"
    >
      <van-checkbox
        @click="changeYN(item, $event)"
        :name="item.id"
        class="chx sel"
        v-for="item in carList"
        :key="item.id"
      >
        <van-swipe-cell>
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.goodsName"
            class="goods-card"
            :thumb="item.img"
          />
          <van-stepper
            min="1"
            max="100"
            v-show="isEdit"
            v-model="item.num"
            @change="buCount(item)"
          />

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delCar(item.id)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- <van-empty v-show="!all"
    class="custom-image"
    :image="require('../../assets/custom-empty-image.jpg')"
    description="购物车竟然是空的"
  /> -->

    <div v-show="carList.length <= 0" class="empty">
      <img src="../../assets/custom-empty-image.jpg" alt="" />
      <h3>购物车竟然是空的</h3>
      <p>再忙,也要记得买点什么犒赏自己哟</p>
    </div>

    <van-submit-bar
      :price="money * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox :disabled="isEdit" v-model="checked" @click="checkAll"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ carNum }}</span
        >件商品，可点击
        <van-button
          type="default"
          size="small"
          round
          @click="editCount"
          class="edittext"
          >{{ isEdit ? "完成编辑" : "编辑" }}</van-button
        >按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  carList,
  updateCartList,
  deleteCartList,
  getCartCount,
  togCarList,
} from "@/api";

import Tips from "../../components/Tips.vue";
export default {
  name: "Cart",
  data() {
    return {
      result: [],
      checked: false,
      num: 0,
      carList: [],
      isEdit: false,
      carNum: 0,
      money: 0,
    };
  },
  components: {
    Tips,
  },
  created() {
    if (localStorage.getItem("userToken")) {
    } else {
      this.$toast.loading({
        message: "请先登录...",
        forbidClick: true,
      });
      this.$store.commit("CHANGEISLOGINED", false);
      this.$router.push({
        path: "/user",
      });
    }

    carList().then((res) => {
      this.carList = res;
      this.result = [];
      res.forEach((element) => {
        if (element.checked) {
          this.result.push(element.id);
        }
      });
      if (this.result.length == this.carList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      console.log(this.carList);
    }),
      getCartCount().then((res) => {
        this.carNum = res.count;
      });
  },
  methods: {
    onSubmit() {
      if (this.result.length == 0) {
        this.$toast("您还没有选择商品");
      } else {
        console.log(this.$store);
        this.$toast("您所在的地区不可购买");
      }
    },
    checkAll() {
      if (this.isEdit) {
        return;
      } else {
        togCarList({ checked: this.checked }).then((res) => {
          this.carList = res;
          console.log("hi");
          this.result = [];
          res.forEach((element) => {
            if (element.checked) {
              this.result.push(element.id);
            }
          });
        });
      }
    },
    changeYN(i, $event) {
      $event.stopPropagation();
      console.log($event);
      if (this.isEdit) {
        return;
      } else {
        updateCartList({ num: i.num, id: i.id, checked: !i.checked }).then(
          (res) => {
            // this.$store.dispatch("getCarList")
            this.carList = res;
            this.result = [];
            res.forEach((element) => {
              console.log(element.checked);
              console.log("nihao");

              if (element.checked) {
                this.result.push(element.id);
              }
            });
            if (this.result.length == this.carList.length) {
              this.checked = true;
            } else {
              this.checked = false;
            }
            // console.log(this.carList);
          }
        );
      }
    },
    delCar(thisId) {
      this.$dialog
        .confirm({
          title: "标题",
          message: "确定要删除吗",
        })
        .then(() => {
          deleteCartList({ id: thisId }).then((res) => {
            this.result = [];
            res.forEach((element) => {
              if (element.checked) {
                this.result.push(element.id);
              }
            });
            this.carList = res;
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    editCount() {
      this.isEdit = !this.isEdit;
    },
    buCount(i) {
      updateCartList({ num: i.num, id: i.id, checked: i.checked }).then(
        (res) => {
          // this.$store.dispatch("getCarList")
          this.carList = res;
          this.result = [];
          res.forEach((element) => {
            if (element.checked) {
              this.result.push(element.id);
            }
          });
          // console.log(this.carList);
        }
      );
    },
  },
  watch: {
    carList() {
      this.money = 0;
      this.carList.forEach((element) => {
        if (element.checked) {
          this.money += element.price * element.num;
        }
      });
    },
  },
};
</script>

<style scoped lang='less'>
.cartbox {
  padding-bottom: 148px;
}
.van-submit-bar {
  margin-bottom: 50px;
  .van-submit-bar__tip {
    display: flex;
    align-items: center;
  }
}
.chx {
  padding: 10px 4%;
  background: #fff;
  border-bottom: 1px solid #ccc;
  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-card__price {
  color: darkred;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
.custom-image {
  margin-top: 20vh;
}

.empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 300px;
  overflow: hidden;
  text-align: center;
  img {
    width: 90%;
    border-radius: 50%;
  }
  h3 {
    margin: 10px 0;
  }

  p {
    margin: 0;
    padding: 0;
  }
}

.van-card__title {
  font-size: 0.16rem;
  width: 1.9rem;
  height: 0.2rem;
  line-height: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>